Tôi đang xây dựng một POC của ứng dụng Angular 1 + 2 Hybrid. Tôi đã quản lý để chạy nó và bây giờ tôi đang cố gắng để giới thiệu Webpack.AngularJS không được tìm thấy trong ứng dụng Hybrid
Tôi gặp lỗi Error: AngularJS v1.x is not loaded! khi khởi động mô-đun. Tôi đã kiểm tra - góc được nạp khi khởi tạo mô-đun.
Mọi trợ giúp sẽ được đánh giá cao.
tập tin nhập:
import { downgradeInjectable, downgradeComponent } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HelloAngular2} from './components/hello-angular2';
import {TimeZonesService} from './services/timezones';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import * as angular from 'angular';
angular.module('scotchTodo', [/*'todoController', 'todoService'*/]);
angular.module('scotchTodo').directive('helloAngular2', downgradeComponent({ component: HelloAngular2}));
angular.module('scotchTodo').factory('timeZones', downgradeInjectable(TimeZonesService));
@NgModule({
declarations: [HelloAngular2],
entryComponents: [HelloAngular2],
imports: [BrowserModule, UpgradeModule],
providers: [TimeZonesService]
})
class MyNg2Module {
ngDoBootstrap() {};
}
platformBrowserDynamic().bootstrapModule(MyNg2Module).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['scotchTodo']);
});
Webpack config:
var webpack = require('webpack'),
path = require('path'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry: {
app: __dirname + '/public/js/boot.js'
},
output: {
path: __dirname + '/public/dist',
filename: 'app-loader.js'
},
resolve:{
extensions: ['.js'],
alias: {
'controllers/main.js': 'controllers/main.js',
'services/todos.js':'services/todos.js'
}
}
};
module.exports = config;
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"public/jslibs",
"typings/main",
"typings/main.d.ts"
]
}
Bootstrap tạo bộ phận đã được định nghĩa góc:
angular.module('scotchTodo', []);
angular.module('scotchTodo').directive('helloAngular2', static_1.downgradeComponent({ component: hello_angular2_1.HelloAngular2 }));
angular.module('scotchTodo').factory('timeZones', static_1.downgradeInjectable(timezones_1.TimeZonesService));
var MyNg2Module = (function() {
function MyNg2Module() {
}
MyNg2Module.prototype.ngDoBootstrap = function() { };
;
return MyNg2Module;
}());
MyNg2Module = __decorate([
core_1.NgModule({
declarations: [hello_angular2_1.HelloAngular2],
entryComponents: [hello_angular2_1.HelloAngular2],
imports: [platform_browser_1.BrowserModule, static_2.UpgradeModule],
providers: [timezones_1.TimeZonesService]
})
], MyNg2Module);
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(MyNg2Module).then(function (platformRef) {
var upgrade = platformRef.injector.get(static_2.UpgradeModule);
upgrade.bootstrap(document.documentElement, ['scotchTodo']);
});
--UPDATE--
Sau khi thêm ProvidePlugin với cấu hình này:
webpack.ProvidePlugin mới ({ 'góc': 'góc' ' })
lỗi Error: AngularJS v1.x is not loaded! mà tôi cho là đến từ Mô-đun nâng cấp đã biến mất. Bây giờ góc là undefined trong angular.module vì góc được nhập khẩu bởi __webpack_require__
--UPDATE 2--
Nó có vẻ như vấn đề là AngularJS không hỗ trợ CommonJS module.exports phong cách. Tôi đang cố gắng sử dụng exports-loader nhưng hiện không hoạt động. Các cấu hình là:
loaders: [
{ test: /[\/]angular\.js$/, loader: "exports-loader?angular" }
]
--UPDATE 3--
Sau khi thêm module.exports = windows.angular; để bootstrap tạo tập tin không có lỗi. Nhưng ứng dụng vẫn không hoạt động vì không có chức năng resumeBootstrap cho góc có sẵn.
--UPDATE 4--
Đây là mã HTML của trang chính:
<body ng-controller="mainController">
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="jumbotron text-center">
<h1>I'm a Todo-aholic <span class="label label-info">{{ todos.length }}</span></h1>
</div>
<!-- TODO LIST -->
<div id="todo-list" class="row">
<div class="col-sm-4 col-sm-offset-4">
<!-- LOOP OVER THE TODOS IN $scope.todos -->
<div class="checkbox" ng-repeat="todo in todos">
<label>
<input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
</label>
</div>
<p class="text-center" ng-show="loading">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</p>
</div>
</div>
<!-- FORM TO CREATE TODOS -->
<div id="todo-form" class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<form>
<div class="form-group">
<!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
<input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
</div>
<!-- createToDo() WILL CREATE NEW TODOS -->
<button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
</form>
</div>
</div>
<div class="text-center text-muted">
<p>A demo by <a href="http://scotch.io">Scotch</a>.</p>
<p>Read the <a href="http://scotch.io/tutorials/javascript/creating-a-single-page-todo-app-with-node-and-angular">tutorial</a>.</p>
</div>
</div>
--UPDATE--
thiết lập window.name = "NG_DEFER_BOOTSTRAP!"; giúp kiễu góc init resumeBootstrap chức năng nhưng ứng dụng vẫn không hoạt động
Mọi độ phân giải? Tôi hiện đang chạy vào cùng một vấn đề và xuất hiện mã rất giống với của tôi :-) –
có thể thử và nhập với các hiệu ứng phụ cho webpack trong một điểm nhập chỉ nhập mẫu và sau đó bao gồm trong index.html – harishr
@harishr của bạn Tôi không hiểu ý bạn là gì, tác dụng phụ là gì? – Michael