我试图在与Angular 1相同的应用程序中使用Angular 2.为了实现这一点,我使用的是Angular UpgradeModule。要安装和设置TypeScript和Angular 2,我使用了以下指南:Upgrading from AngularJS。
我的Angular 1版本是1.4.8,Angular是4.0.3,TypeScript是2.3.2。
我的tsconfig.json看起来像这样:
{
"compilerOptions": {
"target": "es5",
"module": "umd",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../../node_modules/@types/"
],
"types": [
"core-js"
]
},
"compileOnSave": true,
"exclude": [
"node_modules/*",
"**/*-aot.ts"
]
}
我的systemjs.config.js:
(function(global) {
System.config({
paths: {
// paths serve as alias
"npm:": "/node_modules/"
},
// map tells the System loader where to look for things
map: {
// our app is within the App/Angular2 folder
app: "/App/Angular2",
// angular bundles
"@angular/core": "npm:@angular/core/bundles/core.umd.js",
"@angular/common": "npm:@angular/common/bundles/common.umd.js",
"@angular/compiler": "npm:@angular/compiler/bundles/compiler.umd.js",
"@angular/platform-browser":
"npm:@angular/platform-browser/bundles/platform-browser.umd.js",
"@angular/platform-browser-dynamic":
"npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
"@angular/http": "npm:@angular/http/bundles/http.umd.js",
"@angular/router": "npm:@angular/router/bundles/router.umd.js",
"@angular/forms": "npm:@angular/forms/bundles/forms.umd.js",
"@angular/upgrade/static":
"npm:@angular/upgrade/bundles/upgrade-static.umd.js",
// other libraries
rxjs: "npm:rxjs",
"angular-in-memory-web-api":
"npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js"
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: "js",
meta: {
"./*.js": {
loader: "systemjs-angular-loader.js"
}
}
},
rxjs: {
defaultExtension: "js"
}
}
});
})(this);
我在项目的根文件夹中有一个main.ts组件,用于提升Angular 2和Angular 1模块:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './App/Angular2/app.module';
// This is the entry point for the AngularJS/Angular hybrid application.
// It bootstraps the Angular module 'AppModule' and the AngularJS module
'mainApp'.
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['mainApp']);
});
我遇到的问题是当我在Visual Studio 2015中使用F5(或Debug)启动应用程序时,我在浏览器的开发者控制台(Chrome)中收到以下错误:
未捕获的ReferenceError:未在systemjs-angular-loader.js
中定义模块
这可能是什么问题?