Войти в систему
Войти с помощью соц. сетей:
So far, this has been a much cleaner implementation, but you still have the two dangling shims inside the index.html file. You've pared down index.html such that it is now requesting only a handful of JS files instead of each module target individually, but you can go even further and bundle all the JS files into a single file.
The challenge in this is that browser shims aren't delivered via modules; in other words, there aren't any other files that will import these to use them. They just assume their use is available. Therefore, the standard Webpack bundling won't pick up these targets and include them in the bundled file.
The code, links, and a live example of this are available at .
You should complete the Migrating the minimum viable application to Webpack bundling recipe first, which will give you all the source files needed for this recipe.
There are a number of ways to go about doing this, including some that involve the addition of Webpack plugins, but there's an extremely simple way as well: just add the imports manually.
Create a new polyfills.ts:
[src/polyfills.ts] import "reflect-metadata"; import "zone.js";
Import this module from main.ts:
[src/main.ts] import './polyfills'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {AppModule} from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule); Finally, clean up index.html:
[index.html] <html> <head> <title>Angular 2 Minimum Viable Application</title> <body> <app-root></app-root> <script src="dist/bundle.js"></script> </body> </html>
Now, Webpack should be able to resolve the shim imports, and all the needed files will be included inside bundle.js.
The only reason that the polyfills are not discovered by Webpack is because they are not required anywhere in the application. Rather, anywhere they are used leads to the assumption that the exposed targets, such as Zone, have previously been made available. Therefore, it is easy for you to simply import them at the very top of your application, which has a well-defined point in the code. With this Webpack, you will be able to discover the existence of polyfills and incorporate them into the generated bundle.
Войти с помощью соц. сетей: