如何将Angular 5集成到Symfony 3.4应用程序中

既然你已经装了Angular CLI，我们直接从现有Symfony 3.4项目入手，步骤超级简单：

1. 在Symfony项目里创建Angular子项目
   打开终端，进入你的Symfony 3.4项目根目录，运行：

   ng new frontend --directory ./frontend --routing true
   

   这个命令会在Symfony根目录下创建一个叫frontend的Angular项目，还会帮你开启路由功能。

2. 配置Angular的构建输出路径
   进入frontend目录，找到angular.json文件，定位到architect -> build -> options -> outputPath，把默认的dist/frontend改成：

   "../web/angular"
   

   这样Angular构建后的文件会直接输出到Symfony的web目录下的angular文件夹里（Symfony 3.4的web是对外公开的静态资源目录，这样才能正常访问到）。

3. 构建Angular项目
   在frontend目录下运行：

   ng build # 开发环境构建，文件体积大但方便调试
   # 或者生产环境用 ng build --prod，文件会自动压缩优化
   

   跑完之后去Symfony的web目录看看，你会看到新生成的angular文件夹。

4. 在Symfony里配置路由和模板，加载Angular

   • 打开src/AppBundle/Controller/DefaultController.php，添加一个新的action：

     public function angularAction()
     {
         return $this->render('angular.html.twig');
     }
     

   • 在app/Resources/views目录下新建angular.html.twig文件，内容如下：

     <!DOCTYPE html>
     <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
         <title>Angular + Symfony</title>
         <base href="/angular/">
         <link rel="stylesheet" href="/angular/styles.css">
     </head>
     <body>
         <app-root></app-root>
         <script src="/angular/runtime.js"></script>
         <script src="/angular/polyfills.js"></script>
         <script src="/angular/vendor.js"></script>
         <script src="/angular/main.js"></script>
     </body>
     </html>
     

   • 打开app/config/routing.yml，添加路由规则：

     angular_home:
         path: /angular
         defaults: { _controller: AppBundle:Default:angular }
     

5. 启动Symfony服务器测试
   回到Symfony根目录，运行：

   php bin/console server:run
   

   打开浏览器访问http://localhost:8000/angular，就能看到你的Angular应用啦！

如果你说可以删掉现有Symfony项目，那我强烈推荐用Symfony官方的Webpack Encore来集成前端框架——它帮你搞定了所有复杂的构建配置，完全不用手动改路径、调打包规则，对新手太友好了。

步骤如下： #

1. 新建Symfony 3.4项目
   先删掉旧的Symfony项目，然后终端运行：

   composer create-project symfony/framework-standard-edition my_symfony_app "3.4.*"
   

2. 安装Webpack Encore
   进入新项目根目录，先装PHP端的bundle：

   composer require symfony/webpack-encore-bundle
   

   然后装前端依赖（用yarn或者npm都行，yarn更稳定）：

   yarn install # 或者 npm install
   

3. 集成你想要的前端框架

   集成Angular

   装Angular核心依赖和开发工具：

   yarn add @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic @angular/router rxjs zone.js
   yarn add --dev @angular-devkit/build-angular @angular/cli
   

   然后修改项目根目录的webpack.config.js，添加Angular支持：

   Encore
       // 保留原有配置，新增下面两行
       .enableAngularRuntimeChunk()
       .configureBabel(function(babelConfig) {
           babelConfig.plugins.push('@angular/compiler-cli/linker/babel');
       })
   ;
   

   集成React

   装React依赖和Babel预设：

   yarn add react react-dom
   yarn add --dev @babel/preset-react
   

   修改webpack.config.js：

   Encore
       // 保留原有配置，新增这一行
       .enableReactPreset()
   ;
   

   集成Vue

   装Vue依赖和加载器：

   yarn add vue
   yarn add --dev vue-loader vue-template-compiler
   

   修改webpack.config.js：

   Encore
       // 保留原有配置，新增这一行
       .enableVueLoader()
   ;
   

4. 编写前端代码并构建
   在assets/js目录下找到app.js，替换成你的框架代码（比如Vue的简单实例）：

   // Vue示例
   import Vue from 'vue';
   new Vue({
       el: '#app',
       template: '<h1>Hello Vue + Symfony!</h1>'
   });
   

   然后运行构建命令：

   yarn encore dev # 开发环境，自动生成source map方便调试
   # 开发时可以用 yarn encore dev --watch，修改代码自动重新构建
   # 生产环境用 yarn encore production，文件会压缩优化
   

5. 在Symfony模板里加载前端资源
   打开app/Resources/views/base.html.twig，在合适的位置添加：

   {% block stylesheets %}
       {{ encore_entry_link_tags('app') }}
   {% endblock %}
   
   {% block javascripts %}
       {{ encore_entry_script_tags('app') }}
   {% endblock %}
   

   然后在模板的<body>里加个挂载点，比如<div id="app"></div>。

6. 启动服务器测试
   运行：

   php bin/console server:run
   

   访问http://localhost:8000，就能看到你的前端应用了！

新手小贴士 #

• Webpack Encore的方式比手动集成Angular要省心太多，不用管路径配置、打包优化这些杂事，适合初学者快速上手。
• 开发时用yarn encore dev --watch，改代码会自动重新构建，不用每次都手动跑命令。
• Symfony 3.4的web目录是唯一对外公开的目录，所有前端静态资源都要通过构建放到这里。

内容的提问来源于stack exchange，提问作者Megumin