基于一个代码的两个 SPA Angular2 应用程序

Question

我正在构建一个 Angular2 应用程序，它将被注入到我现有的网站中。我需要在两个不同的 URL 上注入此应用程序：

我的客户网站www.mysite.com/user
我的管理面板www.mysite.com/admin

我遇到的问题是我正在尝试从一个代码库构建 2 个 SPA angular 应用程序，（以便我们可以重用组件等）

我打算通过 javascript 函数 $('somecontainer').load(myAng2App.html) 注入应用程序。这个想法是为用户和管理员使用一个应用程序，因为会有许多共享功能（服务）。管理员将有更多的选择。

Angular2 应用程序的欢迎页面对于每个用户都是不同的。
我打算创建两个家庭组件：

客户

分量

    import { Component } from '@angular/core'; 
    import {SharedComponent} from './shared/shared.component';   

    @Component({
           moduleId: module.id,
           selector: 'app-user',
           templateUrl: 'app.user.component.html',
           styleUrls: ['app.component.css'],
           directives: [SharedComponent] 
    })

    export class AppUserComponent {
           title = 'User!';
    }

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ParentCoachApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <h2>index.html</h2>
  <app-user>Loading...</app-user>
    <script src="vendor/es6-shim/es6-shim.js"></script>
    <script src="vendor/reflect-metadata/Reflect.js"></script>
    <script src="vendor/systemjs/dist/system.src.js"></script>
    <script src="vendor/zone.js/dist/zone.js"></script>
    <script>
      System.import('system-config.js').then(function () {
        System.import('main.js');
      }).catch(console.error.bind(console));
    </script>
</body>
</html>

管理员

分量

    import { Component } from '@angular/core'; 
    import {SharedComponent} from './shared/shared.component';   

    @Component({
           moduleId: module.id,
           selector: 'app-admin',
           templateUrl: 'app.admin.component.html',
           styleUrls: ['app.component.css'],
           directives: [SharedComponent] 
    })

    export class AppAdminComponent {
           title = 'Admin!';
    }

admin.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ParentCoachApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <h2>index.html</h2>
  <app-admin>Loading...</app-admin>
    <script src="vendor/es6-shim/es6-shim.js"></script>
    <script src="vendor/reflect-metadata/Reflect.js"></script>
    <script src="vendor/systemjs/dist/system.src.js"></script>
    <script src="vendor/zone.js/dist/zone.js"></script>
    <script>
      System.import('system-config.js').then(function () {
        System.import('main.js');
      }).catch(console.error.bind(console));
    </script>
</body>
</html>

我尝试引导 2 个组件，但如果其中一个组件不可用，则会出现错误：
The selector "***" did not match any elements

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppUserComponent , AppAdminComponent , environment } from './app/';


if (environment.production) {
  enableProdMode();
}

bootstrap(AppUserComponent );
bootstrap(AppAdminComponent );

我正在使用angular-cli

现在我有 3/4 个问题，如果有人能回答我并给出一些指导，我将非常高兴：

是否可以从一个 angular co debase 中得到 2 个 SPA 应用程序，这是解决这个问题的正确方法吗？
我遇到的问题是如何告诉 bootstrap(whichComponent) 在哪个站点加载？

Answer 1

我解决了我的问题（它适用于 angular-cli 直到版本 1.0.0-beta.10 ，因为下一个版本基于 Webpack 而不是 Systemjs）。

这是我的解决方案：
main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppUserComponent , AppAdminComponent , environment } from './app/';


if (environment.production) {
  enableProdMode();
}

export class UserLoad(){
  constructor(){
      bootstrap(AppUserComponent);
  }
}
export class AdminLoad(){
  constructor(){
     bootstrap(AppAdminComponent);
  }
}

然后在客户端index.html

<script>
      System.import('system-config.js').then(function () {
        System.import('main').then(function(m){
           m.UserLoad();
        })
      }).catch(console.error.bind(console));
</script>

并在 Admin index.html

<script>
     System.import('system-config.js').then(function () {
         System.import('main').then(function(m){
            m.AdminLoad();
          })
      }).catch(console.error.bind(console));
</script>

就像我提到的那样，这个解决方案在最新版本的 angular-cli 和 Webpack 中不起作用。在 Angular rc.4 和 Angular rc.5

上测试

如果有人知道如何让它发挥作用，我将非常乐意看到解决方案。

Answer 2

您可以使用

在 typescript 应用程序文件夹中创建另一个模块

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {AdminModule} from "./admin.module";

platformBrowserDynamic().bootstrapModule(AdminModule);

然后在管理布局中：

<base href="http://localhost:20632/admin" />
<script>
    System.import('admin').then(null, console.error.bind(console));
</script>

这对我有用。

基于一个代码的两个 SPA Angular2 应用程序

Two SPA Angular2 apps based on one code

angular

webpack

angular-cli