1

当我运行混合应用程序时，我在控制台中得到了这个。我正在通过 webpack 捆绑它（虽然这不是必需的，如果它有效，我可以使用其他东西）

zone.js:32 Uncaught Error: Zone already loaded.
at :9000/vendor.bundle.js:1421:143 [<root>]
at :9000/vendor.bundle.js:1421:10697 [<root>]
at Object.<anonymous> (zone.js:9) [<root>]
at Object.<anonymous> (zone.js:9) [<root>]
at u (bootstrap:76) [<root>]
at Object.357 (main.ts:11) [<root>]
at u (bootstrap:76) [<root>]
at r (bootstrap:43) [<root>]
at 357 (bootstrap:134) [<root>]
at :9000/app.bundle.js:1:1076 [<root>]
ZoneAwareError @ zone.js:993
(anonymous) @ zone.js:32
(anonymous) @ zone.js:21
(anonymous) @ zone.js:9
(anonymous) @ zone.js:9
u @ bootstrap:76
357 @ main.ts:11
u @ bootstrap:76
r @ bootstrap:43
357 @ bootstrap:134
(anonymous) @ bootstrap:134
angular.js:125 Uncaught Error: [$injector:modulerr] Failed to instantiate 
module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either 
misspelled the module name or forgot to load it. If registering a module 
ensure that you specify the dependencies as the second argument.

以下是我的代码。

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.angularjs.org/snapshot/angular.js"></script>
    <!--<script src="app.js"></script>-->
    <script>
        // No need for below bootstrap. Remove
      //angular.element(function() {
            //angular.bootstrap(document, ['app']);
      //});
    </script>

    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <!--<script src="https://unpkg.com/zone.js@0.8.4?main=browser"> 
 </script>-->
    <!--<script>
        As this is SystemJS this should be removed
  System.import('main.ts').catch(function(err){ console.error(err); });
  </script>-->
</head>
<body xx-ng-app="app">
   <my-app>Loading AppComponent content here ...</my-app>
   <hr>
   <js-app>Loading {{'js-app component here...'}}</js-app>
</body>
</html>

根文件夹中的 app.ts

  import * as angular from 'angular';
   // export module
   //export default angular.module("app", []);

   export default angular.module("app", []).component("jsApp", {
      template: "<p>Hello {{'AngularJS'}}</p>",
      controller: function() {
        console.log("app component started");
       }
   });

app.module.ts

import app from '../app';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import * as angular from 'angular';


@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]

})
export class AppModule { 
  constructor(private upgrade: UpgradeModule) {

   }
  ngDoBootstrap() {}
}

main.ts

//import 'es6-shim';
import app from '../app';

import 'zone.js';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

//import 'reflect-metadata';

import 'rxjs';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';    
import { AppModule } from './app.module';    
import { UpgradeModule } from '@angular/upgrade/static';
import * as angular1 from 'angular';
import { setAngularLib } from '@angular/upgrade/static';


platformBrowserDynamic().bootstrapModule(AppModule)

 .then( platformRef => {
      setAngularLib(angular1);
      console.log("BOOTSTRAPING AngularJS : ", platformRef );
      const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
      console.log("upgrade: "+upgrade);
      upgrade.bootstrap(document.body, ['app'], {strictDi: true});

});

webpack.dev.js

'use strict';

const HtmlWebpack = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
var helpers = require('./helpers');
//const ChunkWebpack = webpack.optimize.CommonsChunkPlugin; // Deprecated

const rootDir = path.resolve(__dirname, '..');
console.log("path.resolve(rootDir, 'app', 'main'): "+path.resolve(rootDir, 'app', 'main'));
module.exports = {

    devServer: {
        contentBase: path.resolve(rootDir, 'dist'),
        port: 9000
    },
    devtool: 'source-map',
    entry: {
        //app: [ path.resolve(rootDir, 'app') ]
        //vendor: [ path.resolve(rootDir, 'app', 'vendor') ]
        'app': './app/main.ts'
    },
    module: {
        rules: [
            { test: /\.css$/, use: 'css-loader' },
            { test: /\.ts$/, use: 'ts-loader' }
        ]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(rootDir, 'dist')
    },
    plugins: [
        new HtmlWebpack({
            filename: 'index.html',
            inject: 'body',
            template: path.resolve(rootDir, 'index.html')
        }),
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /(.+)?angular(\\|\/)core(.+)?/,
            helpers.root('./app'), // location of your src
            {} // a map of your routes
        ),
    ],
    optimization: {
        splitChunks: {
            name: 'vendor',
            chunks: 'all',
            },
    },
    resolve: {
        extensions: [ '*', '.js', '.ts' ]
    }
};

我已经将一些代码与 Angular 2 混合，所以我不确定我在哪里添加了重复代码。我已经加载了一次 zone.js ，所以我认为它无法找到 Angular 1 app。我怎样才能让这个运行？

4

0 回答 0