在Angular 6中,可以使用Angular CLI来创建多个入口点。以下是一个解决方法的代码示例:
ng new multi-entry-example
cd multi-entry-example
ng generate application second-app
extra-entry-point
的文件夹,并在其中创建一个新的main.ts
文件:mkdir extra-entry-point
cd extra-entry-point
touch main.ts
main.ts
文件中编写第二个入口点的应用代码:import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SecondAppModule } from './app/second-app.module';
const bootstrap = () => platformBrowserDynamic().bootstrapModule(SecondAppModule);
// 如果是生产环境,则启用生产模式
if (environment.production) {
enableProdMode();
}
// 启动应用
bootstrap().catch(err => console.log(err));
angular.json
文件中配置多个入口点:"projects": {
"multi-entry-example": {
// ...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/multi-entry-example",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
]
},
"configurations": {
"production": {
// ...
}
}
},
"second-app-build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/second-app",
"index": "src/index.html",
"main": "src/extra-entry-point/main.ts", // 指定第二个入口点的main.ts文件
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
]
},
"configurations": {
"production": {
// ...
}
}
},
// ...
}
}
}
src/index.html
文件中添加一个新的脚本标签来加载第二个入口点的应用:
Multi Entry Point Example
ng build --prod
ng build second-app-build --prod
现在,你将在dist/multi-entry-example
目录下找到第一个入口点的应用程序文件,以及在dist/second-app
目录下找到第二个入口点的应用程序文件。
可以通过在不同的src/app
文件夹下创建不同的模块和组件来为每个入口点编写不同的应用程序逻辑。